<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>商品规格</title>
  <link rel="stylesheet" href="{__CSS__}/element_ui.css"/>
  <link rel="stylesheet" href="{__CSS__}/style.css"/>
  <script src="{__JS__}/vue2.js"></script>
  <script src="{__JS__}/element_ui.js"></script>
  <script src="{__JS__}/axios.min.js"></script>
  <script src="{__JS__}/request.js"></script>
</head>
<body>
<div id="app">
  <div class="app-loading" v-if="pageLoading">
    <div class="app-loading__logo">
      <img src="{__IMG__}/logo.png"/>
    </div>
    <div class="app-loading__loader"></div>
    <div class="app-loading__title">{$title}</div>
  </div>
  <el-card class="box-card" v-else>
    <div slot="header" class="clearfix">
      <span>商品规格</span>
    </div>
    <div class="search-box">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="商品规格">
          <el-input v-model="searchForm.name" placeholder="" clearable size="small"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" size="small" icon="el-icon-search" >查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="width:100%;height:0;border-bottom:#E4E7ED 1px dashed;margin-bottom: 10px"></div>
    <el-button type="primary" icon="el-icon-plus" size="small" @click="addAttr" style="margin-top: 10px">添加规格</el-button>
    <div style="width:100%;height:0;border-bottom:#E4E7ED 1px dashed;margin-top: 10px"></div>
    <el-table
            :data="tableData"
            style="width: 100%;">
      <el-table-column
              type=""
              prop="id"
              label="ID">
      </el-table-column>
      <el-table-column
              prop="name"
              label="规格名">
      </el-table-column>
      <el-table-column
              label="商品规格">
        <template slot-scope="scope">
          <p>{{ scope.row.title }}</p>
        </template>
      </el-table-column>
      <el-table-column
              label="商品规格值">
        <template slot-scope="scope">
          <p v-for="(item,index) in scope.row.item.split(' | ')" :key="index">{{ item }}</p>
        </template>
      </el-table-column>
      <el-table-column
              prop="operation"
              label="操作">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
          <el-button @click="handleDel(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
            style="margin-top: 10px"
            background
            layout="->, prev, pager, next"
            :page-size="searchForm.limit"
            @current-change="handlePageChange"
            :total="total">
    </el-pagination>

    <el-dialog :title="title" :visible.sync="dialogVisible" width="900px" :close-on-click-modal="false">
      <el-form :model="form" :rules="rules" ref="ruleForm"  label-width="80px">
        <el-form-item label="模板名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="参数">
          <el-button type="primary" icon="el-icon-plus" size="small" @click="addRule">新的规格</el-button>
          <el-table
                  :data="preItem"
                  border
                  style="width: 100%">
            <el-table-column
                    label="规格名"
                    width="200">
              <template slot-scope="scope">
                <el-input placeholder="规格名" style="width: 150px" v-model="scope.row.title"></el-input>
                <i class="el-icon-delete del-btn" @click="delTitle(scope.$index)"></i>
              </template>
            </el-table-column>
            <el-table-column
                    label="规格值">
              <template slot-scope="scope">
                <div style="width: 180px;float: left;margin-top: 5px" v-for="(vo,index) in scope.row.item" :key="index">
                  <el-input placeholder="规格值" style="width: 150px" v-model="scope.row.item[index]"></el-input>
                  <i class="el-icon-delete del-btn" @click="delItem(scope.$index, index)"></i>
                </div>
                <i class="el-icon-plus add-btn" @click="addNewItem(scope.$index)">添加</i>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="optSubmit('ruleForm')" size="small" :loading="loading">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</div>

<script>
  new Vue({
    el: '#app',
    data: function () {
      return {
        pageLoading: true,
        searchForm: {
          name: '',
          limit: 15,
          page: 1
        },
        dialogVisible: false,
        title: '新增商品规格',
        total: 1,
        tableData: [],
        baseIndex: '/admin/',
        dialogCateVisible: false,
        form: {
          id: 0,
          name: ''
        },
        ruleItem: {
          'title': '',
          'item': ['']
        },
        preItem: [],
        rules: {
          name: [
            { required: true, message: '请输入模板名称', trigger: 'blur' }
          ]
        },
        loading: false
      }
    },
    mounted() {
      this.getList()
      this.pageLoading = false
    },
    methods: {
      // 获取列表
      async getList() {
        let res = await request.get(this.baseIndex + 'goodsRule/index', this.searchForm)
        this.tableData = res.data.data
        this.total = res.data.total
      },
      // 添加规格
      addAttr() {
        this.title = '新增商品规格'
        this.dialogVisible = true
        this.preItem = [];
        this.preItem.push(JSON.parse(JSON.stringify(this.ruleItem)))
      },
      addRule() {
        let item = JSON.parse(JSON.stringify(this.ruleItem))
        this.preItem.push(item)
      },
      // 删除规格标题
      delTitle(index) {
        this.preItem.splice(index, 1);
      },
      // 删除规格
      delItem(tableIndex, index) {
        this.preItem[tableIndex].item.splice(index, 1);
      },
      // 添加新的节点
      addNewItem(index) {
        this.preItem[index].item.push('');
      },
      // 搜索
      onSubmit() {
        this.getList()
      },
      // 编辑参数
      handleEdit(item) {
        this.title = '编辑商品参数'
        this.dialogVisible = true

        this.form.id = item.id
        this.form.name = item.name
        this.preItem = JSON.parse(item.value)
      },
      // 删除参数
      handleDel(item) {
        this.$confirm('此操作将永久删除该商品规格, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let res = await request.get(this.baseIndex + 'goodsRule/del', {id: item.id})
          if (res.code == 0) {
            this.$message.success(res.msg)
            this.getList()
          } else {
            this.$message.error(res.msg)
          }
        }).catch(() => {});
      },
      // 分页
      handlePageChange(page) {
        this.searchForm.page = page
        this.getList()
      },
      // 新增或编辑
      optSubmit(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            if (this.preItem.length == 0) {
              this.$message.error('请输入规格')
              return false;
            }
            this.preItem.forEach((item, index) => {
              this.form['item' + index] = item
            })

            this.loading = true
            let res;
            if (this.form.id) {
              res = await request.post(this.baseIndex + 'goodsRule/edit', this.form)
            } else {
              res = await request.post(this.baseIndex + 'goodsRule/add', this.form)
            }
            this.loading = false
            if (res.code == 0) {
              this.dialogVisible = false
              this.$message.success(res.msg)
              this.form = {
                id: 0,
                name: ''
              }
              this.getList()
            } else {
              this.$message.error(res.msg)
            }
          }
        });
      }
    }
  });
</script>
<style>
  p { padding: 0;
    margin: 0;}
  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 20px;
    line-height: 20px;
  }
  .del-btn {cursor: pointer;color: #F56C6C}
  .add-btn {cursor: pointer;margin-top: 18px;color: #409EFF}
</style>
</body>
</html>